<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['1000px', '700px']" :success="init">
    <lay-container fluid="true" class="user-box">
      <lay-form style="margin-top: 10px" :model="searchQuery" ref="queryRef">
        <lay-row>
          <lay-col :md="5">
            <lay-form-item label="用户名" label-width="80" prop="username">
              <lay-input v-model="searchQuery.username" placeholder="请输入" :allow-clear="true" style="width: 98%">
              </lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="昵称" label-width="80" prop="nickName">
              <lay-input v-model="searchQuery.nickName" placeholder="请输入" :allow-clear="true" style="width: 98%">
              </lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="状态" label-width="80" prop="status">
              <lay-select class="search-input" v-model="searchQuery.status" :allow-clear="true" placeholder="请选择">
                <lay-select-option value="on" label="启用"></lay-select-option>
                <lay-select-option value="off" label="禁用"></lay-select-option>
              </lay-select>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label-width="20">
              <lay-button style="margin-left: 20px" type="primary" @click="userPage()"> 查询 </lay-button>
              <lay-button @click="toReset(queryRef,userPage)"> 重置 </lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    <!-- table -->
    <div class="table-box">
      <lay-table
        :page="fxwPage.page"
        :height="'500px'"
        :columns="columns"
        :loading="fxwPage.loading.value"
        :default-toolbar="true"
        :data-source="fxwPage.dataSource.value"
        v-model:selected-keys="fxwPage.selectedKeys.value"
        @change="userPage">

        <template v-slot:operator="{ row }">
          <lay-button type="danger" size="sm" @click="toUnbindUserDom(row)">解绑</lay-button>
        </template>

      </lay-table>
    </div>
    </lay-container>
  </lay-layer>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {pageUserByRoleId} from '@/api/module/user'
import useFxwPage from '@/hooks/useFxwPage'
import useFxwForm from "@/hooks/useFxwForm";
import {unbindUser} from "@/api/module/role";
import {layer} from "@layui/layui-vue";

const {changeVisible,visible,toReset} = useFxwForm()

const fxwPage = useFxwPage();
const queryRef = ref();
const props = defineProps({
  roleId: {
    type: Number,
    default: ''
  }
});

const searchQuery = ref({
  username: '',
  nickName: '',
  status: '',
  roleId: 0,
  pageNumber: 1,
  pageSize: 10,
})

const columns = ref([
  { title: '用户名', width: '50px', key: 'username',},
  { title: '昵称', width: '80px', key: 'nickName' },
  { title: '状态', width: '80px', key: 'status' },
  { title: '创建人', width: '80px', key: 'createBy' },
  { title: '创建时间', width: '80px', key: 'createTime' },
  { title: '操作', width: '100px', customSlot: 'operator', key: 'operator', fixed: 'right' }
])

const init = function () {
  toReset(queryRef);
  userPage();
};

// 用户列表
const userPage = function (cp:any = fxwPage.page){
  searchQuery.value.roleId = props.roleId;
  searchQuery.value.pageNumber = cp.current;
  searchQuery.value.pageSize = cp.limit;
  fxwPage.loading.value = true;
  pageUserByRoleId(searchQuery.value).then(res=>{
    fxwPage.dataSource.value = res.data.records;

    fxwPage.loading.value = false;
    fxwPage.page.total = res.data.totalRow;
  })
}

// 解绑用户
const unbindUserBo = ref({
  userId: 0,
  roleId: 0
})
const toUnbindUserDom = function(row:any) {
  layer.confirm("确认解绑用户【" + row.username + "】吗？",
      {
        title: '解绑用户',
        btn: [
          {
            text:'确定', callback: (id:string) => {
              unbindUserBo.value.userId = row.id;
              unbindUserBo.value.roleId = props.roleId;
              unbindUser(unbindUserBo.value).then(res => {
                if (res.code == 200){
                  layer.close(id);
                  userPage();
                }
              })
            }
          },
          {
            text:'取消', callback: (id:string) => {
              layer.close(id);
            }
          }
        ]
      }
  );
}

defineExpose({
  changeVisible
})

</script>

<style scoped>
.user-box {
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 510px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>